<template>
    <el-container style="width: 100%;height:100%">
        <el-header style="background-color: lightgrey;width: 100%;">
            <span style="font-size: xx-large;color: black;font-weight: 600;cursor: pointer;" @click="back"><el-icon><Back /></el-icon>返回</span>
        </el-header>
        <el-main>
    <el-row :gutter="24" justify="center"  style="height: 1300px;width: 1400px;">
        <el-col :span="12" style="width: 800px;">
            <el-card style="height: 40%;width: 1100px;margin-left: -310px;background-color: antiquewhite;">
                <h1 slot="header" style="text-align: center;font-size: xx-large;font-weight: 700;">${title}</h1>
                <div>{{articleInfo.content}}</div>
                <div slot="footer" style="margin-top: 380px;font-size:x-large;text-align: center;">
    <span style="float: left;">
        <el-icon><View /></el-icon><span style="margin-left: 5px;">{{articleInfo.viewCount}}</span>
    </span>
                    <el-icon v-if="isLike" style="cursor: pointer;font-size: xx-large;" @click="likeAc"><StarFilled /></el-icon>
                    <el-icon v-else style="cursor: pointer;font-size: xx-large;" @click="likeAc"><Star /></el-icon>
                    {{articleInfo.likes}}
                    <span style="float: right;">作者：<span style="cursor: pointer;color: rgb(110, 140, 150);" @click="goHomeLink">{{ authorName }}</span></span>
                </div>
            </el-card>
            <el-card style="width: 1100px;height: 8%;margin-left: -310px;">
                <div  style="font-size: x-large;font-weight: 600;">文章标签
                    <el-tag v-if="tNames.length>0" v-for="t in tNames" :key="t" style="margin-left: 5px;font-size: large;">{{ t }}</el-tag>
                </div>
                <div style="font-size: x-large;font-weight: 600;">文章分类
                    <el-tag v-if="cNames.length>0" v-for="t in cNames" :key="t" style="margin-left: 5px;font-size: large;">{{ t }}</el-tag>
                </div>
            </el-card>
            <el-card style="height: 60%;width: 1100px;margin-left: -310px;">
                <h1 slot="header" style="font-size: xx-large;font-weight: 600;">发表评论</h1>
                <el-scrollbar height="650px" >
                    <u-comment v-if="isLogin&&isComment" :config="config" @submit="submit" @like="like"/>
                    <h1 v-else-if="!isLogin" style="text-align: center;font-size: xx-large;font-weight: 400;">请登录后查看(<span style="cursor: pointer;" @click="goLogin">前往登录</span>)</h1>
                    <h1 v-else-if="isLogin&&!isComment" style="text-align: center;font-size: xx-large;font-weight: 400;">评论区已关闭，无法评论</h1>
                </el-scrollbar>
            </el-card>
        </el-col>
    </el-row>
            <el-backtop :right="200" :bottom="120" />
        </el-main>
    </el-container>
</template>

<script>
    import { defineComponent,onBeforeMount,reactive,ref} from 'vue'
    import emoji from '../../../public/emoji';
    import { ElMessage } from 'element-plus'
    import {htmlToText,
        likeArticle, getArticleInfo,tagAndCategory
    } from '@/api/back/article.js'
    import {getUserInfo,getAuthorInfoByAid} from '@/api/back/user.js'
    import {
        showComments,getUserCommentInfo
        ,likeComment,
    } from '@/api/back/comment.js'
    import {commit} from '@/utils/comment.js'
    import router from '@/router';
    import '@/assets/article.css'
    export default defineComponent({
        name:'Article',
        setup() {
            const back=()=>{
                router.back();
            }
            const goLogin=()=>{router.push('/login')}
            //获取文章分类和标签
            const getSomeInfo=()=>{
                tagAndCategory(articleId.value).then(res=>{
                    if(res.code==200){
                        const e=res.data;
                        tNames.value=e.tags.map(i=>i.name);
                        cNames.value=e.categories.map(i=>i.name);
                    }
                })
            }
            //文章标题
            const title=ref('');
            //分类集
            const cNames=ref([])
            //标签集
            const tNames=ref([])
            //评论人信息
            const config = reactive({
                user: {
                    id: undefined,
                    username: '',
                    avatar: '',
                    level:1,
                    //点赞的评论id
                    likeIds: []
                },
                emoji: emoji,
                // 评论信息
                comments: []
            })
            //是否点赞
            const isLike=ref(false);
            //文章点赞事件
            const likeAc=()=>{
                isLike.value=!isLike.value;
                let type=isLike.value?1:-1;
                likeArticle(articleId.value,uid.value,type).then(res=>{
                    if(res.code!=200){
                        ElMessage.error(res.msg);
                    }else{
                        getCurInfo(uid.value);
                    }
                })
            }
            //登陆状态
            const isLogin=ref(false);
            //用户/游客标识
            const uid=ref('');
            //检查登录状态并显示评论
            const checkLoginAndShowComms= async()=>{
                const token=localStorage.getItem('token');
                if(token&&token!=null){
                    const res=await getUserInfo();
                    if(res.code==200){
                        isLogin.value=true
                        uid.value=res.data.id+'';
                    }else{
                        uid.value=localStorage.getItem('tourist')
                        isLogin.value=false;
                        localStorage.removeItem('token');
                        localStorage.removeItem('routeList');
                    }
                }else{
                    isLogin.value=false;
                    uid.value=localStorage.getItem('tourist')
                }
                //登陆后检查评论
                if(isLogin.value){
                    getCommenterInfo();
                }
                //获取文章信息
                getCurInfo(uid.value);
                getSomeInfo();
                getAuthorInfoByAid(articleId.value).then(res=>{
                    if(res.code==200){
                        const e=res.data;
                        authorId.value=e.id;
                        authorName.value=e.nickname || e.username;
                    }
                })
            }
            const goHomeLink=()=>{
                router.push({path:'/userHome',query:{'id':authorId.value}});
            }
            const authorId=ref(undefined);
            const authorName=ref('');
            //文章id
            const articleId=ref(undefined);
            //挂载前:ok
            onBeforeMount(()=>{
                const query=router.currentRoute._value.query;
                if(Object.keys(query)){
                    const id=query.id;
                    articleId.value=id;
                    buildNetEnvComment();
                    checkLoginAndShowComms();
                }else{
                    router.push('/')
                }
            })
            const buildNetEnvComment=()=>{
                const o = navigator.userAgentData;
                if(!o){
                    const modifiedUserAgentData = {
                        brands: [
                            {brand: 'Chromium', version: '116'},
                            {brand: 'Not)A;Brand', version: '24'},
                            {brand: 'Google Chrome', version: '116'}
                        ],
                        mobile: false,
                        platform: "Windows"
                    };
                    // 重新设置浏览器的 User Agent 数据
                    Object.defineProperty(navigator, 'userAgentData', {
                        value: modifiedUserAgentData,
                        configurable: true,
                        enumerable: true,
                        writable: false
                    });}
            }
            const isComment=ref(true);
            //获取文章信息:ok
            const getCurInfo=(uid)=>{
                getArticleInfo(articleId.value,uid,0).then(res=>{
                    if(res.code==200){
                        const e=res.data;
                        isComment.value=e.isComment;
                        articleInfo.viewCount=e.viewCount;
                        articleInfo.likes=e.likeCount;
                        articleInfo.content=htmlToText(e.content);
                        isLike.value=e.likeStatus;
                        title.value=e.title;

                    }else{
                        ElMessage.error(res.msg);
                    }
                })
            }
            //文章内容信息:ok
            const articleInfo=reactive({
                viewCount:0,
                likes:0,
                content:''
            })
            //获取评论人信息
            const getCommenterInfo=async ()=>{
                const res=await getUserCommentInfo();
                if(res.code==200){
                    const e=res.data;
                    config.user.id=e.id;
                    config.user.username=e.username;
                    config.user.avatar=e.avatar;
                    config.user.likeIds=e.likeIds;
                    config.user.level=e.level;
                    getCommentList();
                }else{
                    ElMessage.error(res.msg);
                }
            }
            //获取评论数据
            const getCommentList=()=>{
                showComments(articleId.value).then(rs=>{
                    if(rs.code==200){
                        config.comments= handleData(rs.data);
                    }else{
                        ElMessage.error(rs.msg);
                    }
                })
            }

            //处理评论数据
            const handleData=(data)=>{
                if(data && data instanceof Array&&data.length>0){
                    return data.map(e=>{
                        const res=
                            {
                                id: e.id,
                                parentId: e.parentId,
                                uid: e.uid,
                                address: e.address,
                                content:htmlToText(e.content),
                                likes: e.likes,
                                createTime: e.createTime,
                                user: {
                                    username: e.username,
                                    avatar: e.avatar,
                                    level: e.level,
                                    homeLink: e.homeLink
                                },
                                reply:{
                                    list:handleData(e.list),
                                    total:e.total
                                }
                            }
                        return res;})
                }else{
                    return data;
                }
            }
            // 提交评论事件
            const submit = ({ content, parentId, finish,reply }) => {
                commit(config,articleId,content,parentId,finish,reply);
            }
            // 点赞按钮事件 将评论id返回后端判断是否点赞，然后在处理点赞状态
            const like = (id) => {
                const likes = config.user.likeIds;
                if (likes.indexOf(id) == -1) {
                    // 点赞 --后端接口处理
                    likes.push(id)
                    likeComment(id,1);
                } else {
                    // 取消点赞 --后端接口
                    likes.splice(likes.findIndex(item => item == id),1)
                    likeComment(id,-1);
                }
            }
            return {
                config,like,submit,isLogin,articleInfo,isLike,title,
                likeAc,tNames,cNames,back,goLogin,isComment,authorName,goHomeLink
            }
        },
    })
</script>


